<template>
  <div class="container">
    <div>
      基本属性
    </div>
    <div class="line"></div>
    <div class="flex_row">
      <div class="row">
        <div class="font">
          <span style="color: red">*</span>考点标题：
        </div>
        <div>
          <el-input
              v-model="info.title"
              placeholder="请输入考点标题"
              clearable
              size="small"
            />
        </div>
      </div>
      <div class="row">
        <div class="font">
          <span style="color: red">*</span>学习人数：
        </div>
        <div>
          <el-input
              v-model="info.learnNumber"
              placeholder="请输入学习人数"
              clearable
              size="small"
            />
        </div>
      </div>
      <div class="row">
        <div class="font"><span style="color: red">*</span>课程列表：</div>
        <div>
          <el-select v-model="info.level" placeholder="请选择" class="search_info2">
            <el-option
              v-for="item in levelList"
              :key="item.key"
              :label="item.value"
              :value="item.key"
            ></el-option>
          </el-select>
        </div>
      </div>
    </div>
    <div class="flex_row">
      <div class="row">
        <div class="font"><span style="color: red">*</span>封面图片：</div>
        <div>
          <div>
            <el-upload
              :headers="token"
              class="avatar-uploader"
              action="https://www.xlpx.org.cn/manage/prod-api/video/imgUpload"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="info.titleImageUrl" :src="'https://www.xlpx.org.cn/fire/image/' +info.titleImageUrl" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </div>
        </div>
      </div>
    </div>
     <div class="row">
      <div class="font">实操详情：</div>
      <!-- <div>
        <el-upload
          :headers="token"
          class="avatar-uploader"
          action="https://www.xlpx.org.cn/manage/prod-api/video/imgUpload"
          :show-file-list="false"
          :on-success="handleAvatarSuccessDetail"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="info.detailImageUrl" :src="'https://www.xlpx.org.cn/fire/image/' +info.detailImageUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </div> -->
      <div>
        <el-upload
          :headers="token"
          class="upload-demo"
          action="https://www.xlpx.org.cn/manage/prod-api/video/imgUpload"
          :on-success="handleAvatarSuccessDetail"
          :limit="1"
                      :on-exceed="handleExceed"

          :before-upload="beforeAvatarUpload2"
          :on-remove="handleRemove"
          :file-list="fileList"
        >
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">
            只能上传pdf文件，且不超过20MB
          </div>
        </el-upload>
      </div>
    </div>
    <div class="footer">
      <el-button @click="back()">返回</el-button>
      <el-button type="primary" @click="submit()">提交</el-button>
    </div>
  </div>
</template>

<script>
import { operationDetail, operationEdit } from "@/api/system/user";
import { getToken } from "@/utils/auth";
export default {
  components: {
   
  },
  data() {
    return {
      fileList: [],
      token: {
        Authorization: getToken(),
      },
      imageUrl: "",
      imageUrlDetail: "",
      imageName: "",
      imageNameDetail: "",
      info: '',
      sexList: [
        {key: '0', value: '男'},
        {key: '1', value: '女'},
        {key: '2', value: '未知'}
      ],
      educationList: [
        {key: '1', value: '博士及以上'},
        {key: '2', value: '硕士'},
        {key: '3', value: '本科'},
        {key: '4', value: '专科'},
        {key: '5', value: '高中'},
        {key: '6', value: '其他'}
      ],
      levelList: [
        { key: "1", value: "消防设施操作员基础知识" },
        { key: "2", value: "消防设施操作员初级" },
        { key: "3", value: "消防设施操作员中级（监控方向）" },
        { key: "4", value: "消防设施操作员中级（维保方向）" },
        { key: "5", value: "消防设施操作员高级（监控方向）" },
        { key: "6", value: "消防设施操作员高级（维保方向）" },
      ],
      directList: [
        { key: '1', value: '监控方向' },
        { key: '2', value: '维保方向' }, 
      ]
    }
  },
  created() {
  },
  mounted(){
    this.init(this.$route.query.id)
  },
  methods: {
    //  handleChange(file, fileList) {
    //     this.fileList = fileList.slice(-3);
    //   },
    beforeAvatarUpload2(file) {
      console.log(file);
      const isPDF = file.type === "application/pdf";
      // const isPNG = file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 20;
      if (!isPDF) {
        this.$message.error("上传文件只能是 PDF 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传文件大小不能超过 20MB!");
      }
      return isPDF && isLt2M;
    },
    init(id) {
      operationDetail(id).then(res => {
        if (res.code == 200) {
          this.info = res.data
          this.fileList.push({name: '原pdf文件', url: this.info.detailImageUrl })
        } else {
          this.$message({ message: res.msg, type: "error" });
        }
      });
    },
    handleAvatarSuccess(res, file) {
      this.info.titleImageUrl = res.imageName;
      // this.info.titleImageUrl = URL.createObjectURL(file.raw);
    },
    handleRemove() {
      this.info.detailImageUrl = null
    },
    handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
    handleAvatarSuccessDetail(res, file) {
      this.info.detailImageUrl = res.imageName;
      // this.info.detailImageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isPNG = file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 20;
      if (!isJPG && !isPNG) {
        this.$message.error("上传头像图片只能是 JPG或PNG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 20MB!");
      }
      return (isJPG || isPNG) && isLt2M;
    },
    back() {
      this.$router.push('operationList')
    },
    submit() {
      let params = {
        id: this.$route.query.id,
        title: this.info.title,
        titleImageUrl: this.info.titleImageUrl,
        learnNumber: this.info.learnNumber,
        detailImageUrl: this.info.detailImageUrl,
      }
      operationEdit(params).then(res => {
        if (res.code == 200) {
          this.$message({ message: res.msg, type: "success" });
          this.$router.push('operationList')
        } else {
          this.$message({ message: res.msg, type: "error" });
        }
      });
    }
  }
}
</script>
<style scoped>
  .container {
    padding-left: 26px;
    padding-right: 24px;
    padding-top: 24px;
  }
  .row {
    display:flex;
    padding-bottom: 20px;
  }
  .line {
    height: 1px;
    background: #DCDFE6;
    width: 100%;
    margin-top: 6px;
    margin-bottom: 20px;
  }
  .row .font {
    width: 200px;
    text-align: right;
    margin-right: 20px;
  }
  .row .fonts {
    width: 300px;
    text-align: right;
    margin-right: 20px;
  }
  .flex_row {
    display: flex;
  }
  .footer {
    width: 540px;
    text-align: right;
    margin-top: 40px
  }
  .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  /* text-align: center; */
  border: 1px dashed #000;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
